﻿<div class="modal-header">
    <h1>Add New Record</h1>
</div>

<div class="modal-body">
    <form class="form-horizontal" name="recordForm" novalidate role="form">
        <div class="form-group" ng-class="{'has-error' : recordForm.userName.$invalid && recordForm.userName.$dirty}">
            <label for="userName" class="col-sm-3 control-label">User Name</label>
            <div class="col-sm-9">
                <input type="text" id="userName" name="userName" class="form-control"
                       ng-model="record.userName" ng-required="true" />
                <span class="help-block" ng-show="recordForm.userName.$invalid  && recordForm.userName.$dirty">User Name is required</span>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : recordForm.text.$invalid && recordForm.text.$dirty}">
            <label for="notes" class="col-sm-3 control-label">Text</label>
            <div class="col-sm-9">
                <textarea name="text" id="text" class="form-control" rows="5" cols="40"
                          ng-model="record.text" ng-required="true"></textarea>
                <span class="help-block" ng-if="recordForm.text.$invalid  && recordForm.text.$dirty">Note text is required</span>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : recordForm.email.$invalid && recordForm.email.$touched}">
            <label for="email" class="col-sm-3 control-label">Email</label>
            <div class="col-sm-9">
                <input type="email" id="email" name="email" class="form-control"
                       ng-model="record.email" ng-required="true" />
                <span class="help-block" ng-show="recordForm.email.$invalid  && recordForm.email.$touched">A valid email is required</span>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : recordForm.homePageUrl.$invalid && recordForm.homePageUrl.$touched}">
            <label for="homePageUrl" class="col-sm-3 control-label">Home Page Url</label>
            <div class="col-sm-9">
                <input type="text" id="homePageUrl" name="homePageUrl" class="form-control"
                       ng-model="record.homePageUrl" placeholder="e.g. http://www.example.com/" />
                <span class="help-block" ng-show="recordForm.homePageUrl.$invalid  && recordForm.homePageUrl.$touched">A valid URL is required</span>
            </div>
        </div>
        <br />
    </form>
    <div class="alert alert-danger" ng-if="hasFormError">
        <ul ng-repeat="item in modelState">
            <li>{{item[0]}}</li>
        </ul>
    </div>
</div>

<div class="modal-footer">
    <div class="col-sm-offset-3 col-sm-9">
        <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />
        <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" ng-disabled="recordForm.$invalid" />
        <br />

    </div>
</div>